<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    div {
        width: 200px;
        height: 120px;
        background-color: aqua;
        text-align: center;
        position: fixed;
        left: 330px;
        top: 40px;
        display: none;
    }

    td {
        text-align: center;
    }
</style>

<body>
    <input type="text">
    <input type="text">
    <input type="text">
    <button onclick="tj()">添加</button>
    <div>
        <input type="text">
        <input type="text">
        <input type="text">
        <button onclick="qd()">确定</button>
    </div>
    <table border="1px">
        <thead>
            <tr>
                <th>房屋标题</th>
                <th>房屋描述</th>
                <th>房屋价格</th>
                <th>房屋面积</th>
                <th>卧室数量</th>
                <th>卫生间数量</th>
                <th>房屋地址</th>
                <th>城市</th>
                <th>省份/州</th>
                <th>邮政编码</th>
                <th>国家</th>
                <th>纬度</th>
                <th>经度</th>
                <th>建造年份</th>
                <th>房屋类型</th>
                <th>产权信息</th>
                <th>配套设施</th>
                <th>房屋状态</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        // 渲染
        var tbody = document.querySelector('tbody')
        function apply() {
            $.ajax({
                type: 'get',
                url: 'http://127.0.0.1:3000/xqing',
                dataType: 'json',
                success: (res) => {
                    console.log(res);
                    tbody.innerHTML = ''
                    res.data.forEach(item => {
                        tbody.innerHTML += `
                     <tr>
                <td>${item.house_id}</td>
                <td>${item.title}</td>
                <td>${item.description}</td>
                <td>${item.price}</td>
                 <td>${item.area}</td>
                <td>${item.bedrooms}</td>
                <td>${item.bathrooms}</td>
                <td>${item.address}</td>
                <td>${item.city}</td>
                <td>${item.state}</td>
                <td>${item.country}</td>
                <td>${item.latitude}</td>
                <td>${item.longitude}</td>
                <td>${item.construction_year}</td>
                <td>${item.property_type}</td>
                <td>${item.ownership}</td>
                <td>${item.amenities}</td>
                <td>${item.status}</td>
                 <td><button onclick="sc(${item.house_id})">删除</button></td>
            </tr>`
                    })
                },
                error: (r) => {
                    console.log(r);
                }
            })
        } apply()
        // 添加
        // function tj() {
        //     var a = document.querySelectorAll('input')[0].value
        //     var b = document.querySelectorAll('input')[1].value
        //     var c = document.querySelectorAll('input')[2].value
        //     // console.log(a,b,c);

        //     $.ajax({
        //         url: 'http://127.0.0.1:3000/create',
        //         type: 'post',
        //         data: {
        //             username: a,
        //             money: b,
        //             phone: c
        //         },
        //         dataType: 'json',
        //         success: (res) => {
        //             console.log(res);
        //             // apply()
        //         },
        //         error: (r) => {
        //             console.log(r);
        //         }
        //     })
        // }

        // 删除
        function sc(iid) {
            // console.log(iid);
            $.ajax({
                type: "get",
                url: "http://127.0.0.1:3000/del?house_id=" + iid,
                // data: {},
                dataType: "json",
                success: (a) => {
                    // console.log(a);
                    apply();
                },
                error: (e) => {
                    console.log(e);
                },
            });
        }


    </script>
</body>

</html>